<template>
	<view>
		<view class="list_box" v-for="item in data" :key="item.id">
		     <view class="box">
		      <view class="left_img">
		       <image :src="item.url" mode=""></image>
		      </view>
		      <view class="conten_text">
		       <p style="font-size: 34upx;line-height: 60upx;  font-weight: 400;">{{item.name}}</p >
		       <p style="color: gray;font-size: 28upx;">{{item.introduce}}</p >
		       <view style="display: flex; justify-content: space-between;margin-top: 20upx;">
		        <p style="font-size: 24upx; color: gray;">参与人数{{item.num}}人</p >
		        <p style="color: #8fc31f;font-size: 33upx;">价格￥{{item.price}}元</p >
		        <!-- <p v-if="item.state == 0" style="color: #8fc31f;font-size: 37upx;">限时免费</p > -->
		       </view>
		      </view>
		     </view>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[]
			}
		},
		created() {
			this.$api.getTrain().then(res=>{
				this.data=res.data.slice(-2)
				console.log(this.data)
			})
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.list_box{
    width: 100%;
    height: 220upx;
    
    background-color: white;
    margin-top: 20upx;
    padding: 0upx 0upx  30upx 0;
    
    .box{
     width: 94%;
     height: 100%;
     margin: 0 auto;
     border-bottom: 1px solid gray;
     display: flex;
     justify-content: space-between;
     padding-bottom: 20upx;
     .left_img{
      width: 300upx;
      height: 210upx;
      image{
       width: 100%;
       height: 100%;
      }
     }
     .conten_text{
      width: 70%;
      height: 100%;
      margin-left: 20upx;
     }
    }
    
   }
</style>
